<!--
 * @Author: your name
 * @Date: 2021-03-02 12:45:59
 * @LastEditTime: 2023-04-26 09:57:05
 * @LastEditors: YXP 2426061097@qqcom
 * @Description: In User Settings Edit
 * @FilePath: \HMI\src\views\PersonMsg\UserMsg.vue
-->
<template>
  <div>
    <el-button size="mini" type="primary" @click="handleAddUser"
      >添加</el-button
    >
    <el-button size="mini" type="primary" @click="getUser">查询</el-button>
    <!-- 表格 -->
    <nercar-table
      :tableData="tableData"
      :total="total"
      @handle-current-change="hanldeChangeSize"
    >
      <template slot="TableBody">
        <el-table-column label="用户名" prop="username"></el-table-column>
        <el-table-column label="密码" prop="password"></el-table-column>
        <el-table-column label="画面权限">
          <template slot-scope="scope">
            <div @click="handlePageEdit(scope.row)">权限设置</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleAddUser">编辑</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="handleDeleteUser(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </template>
    </nercar-table>
    <!-- 页面弹窗 -->
    <el-dialog
      :title="dialogInfo.title"
      :visible.sync="dialogInfo.dialogVisible"
      width="30%"
    >
      <el-tree
        :data="pageAll"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        :props="defaultProps"
      >
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogInfo.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitPageRolu">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 用户弹窗 -->
    <el-dialog
      :title="userDialog.title"
      :visible.sync="userDialog.dialogVisible"
      width="30%"
    >
      <el-form :model="userForm">
        <el-form-item label="用户名">
          <el-input v-model="userForm.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="userForm.password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <template slot-scope="scope">
            <el-button @click="handlePageEdit(scope.row)">权限设置</el-button>
          </template>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userDialog.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      pageInfo: {
        pageIndex: 1,
        pageSize: 10,
      },
      dialogInfo: {
        title: '',
        dialogVisible: false,
        username: '',
      },
      pageAll: [],
      defaultProps: {
        children: 'children',
        label: 'title',
      },
      userDialog: {
        title: '',
        dialogVisible: false,
      },
      userForm: {},
      
    }
  },
  mounted() {
    this.getAllUser()
    this.getPageAll()
    this.getUser()
  },
  methods: {
    //查询全部用户信息
    async getAllUser() {
      let res = await this.$post('/user/find/findAll', {
        page: this.pageInfo.pageIndex,
        size: this.pageInfo.pageSize,
      })
      console.log("用户信息",res)

      if (res.code == 0) {
        this.tableData = res.data
      }
    },
    //根据ID查询用户信息
    async getUser(){
      let res =await this.$post('/user/findUserById',1)
      console.log("333===",res)
    },
    hanldeChangeSize(val) {
      console.log(val)
      this.pageInfo.pageIndex = val
      this.getAllUser()
    },
    async getPageAll() {
      let res = await this.$post('/page/find/findAllPage', {})
      if (res.code == 0) {
        this.pageAll = res.data
        this.total = res.total
      }
    },
    handlePageEdit(data) {
      this.dialogInfo.dialogVisible = true
      this.dialogInfo.title = '画面权限设置'
      this.dialogInfo.username = data.username
      this.findUserPage(data.username)
    },
    async findUserPage(data) {
      let res = await this.$post('/user/find/findAllPage', {
        username: data,
      })
      if (res.code == 0) {
        let list = res.data.map((item) => {
          return item.id
        })
        console.log(list)
        this.$refs.tree.setCheckedKeys(list)
      }
    },
    async submitPageRolu() {
      let data = {
        username: this.dialogInfo.username,
        pageList: this.$refs.tree.getCheckedKeys(),
      }
      let res = await this.$post('/user/update/page', data)
      if (res.code == 0) {
        this.$message({
          message: '编辑成功',
          type: 'success',
        })
        this.dialogInfo.dialogVisible = false
      } else {
        this.$message({
          message: res.msg,
          type: 'warning',
        })
      }
    },
    handleDeleteUser(data) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.deleteUser(data)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    async deleteUser(data) {
      let res = await this.$post('/user/delete', {
        username: data.username,
      })
      if (res.code == 0) {
        this.$message({
          message: '删除成功',
          type: 'success',
        })
        this.getAllUser()
      } else {
        this.$message({
          message: '删除失败',
          type: 'warning',
        })
      }
    },
    handleAddUser() {
      this.userDialog.title = '添加'
      this.userDialog.dialogVisible = true
      this.userForm = {}
    },
    async submitUser() {
      let res = await this.$post('/user/save', this.userForm)
      if (res.code == 0) {
        this.$message({
          message: '添加成功',
          type: 'success',
        })
      } else {
        this.$message({
          message: '添加失败',
          type: 'warning',
        })
      }
      this.userDialog.dialogVisible = false
      this.getAllUser()
    },
  },
}
</script>

<style></style>
